import React, { Component } from 'react'

/**
 * 列表渲染为什么要设置key值？
 *  为了列表的复用和重排，设置key值可以提高性能
 *  理想的key就是 item.id 
 *  如果不涉及列表的增加、删除、重排，设置成索引也没有问题
 */
export default class App extends Component {

    state = {
        list: [
            {
                text: '111',
                id: 111
            },
            {
                text: '222',
                id: 222
            },
            {
                text: '333',
                id: 333
            }
        ]
    }

    render() {
        let newList = this.state.list.map(item =>
            <li key={item.id}>{item.text}</li>)

        return (
            <div>
                <ul>
                    {/* 在react中如果渲染的变量是个数组，react会自动进行join变成字符串 */}
                    {newList}
                </ul>
                <button onClick={() => {
                    this.setState({
                        list: [
                            {
                                text: '222',
                                id: 222
                            },
                            {
                                text: '333',
                                id: 333
                            }
                        ]
                    })
                }}>修改列表</button>
            </div >
        )
    }
}


/**
 * 原生js - map方案
 */

// let list = ['aa', 'bb', 'cc']
// let newList = list.map(item => `<li>${item}</li>`)
// console.log('newList', newList.join(''));

